<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>安培定律演示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', sans-serif;
        }

        body {
            background: #e3f2fd;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            width: 100%;
            margin-top: 30px;
        }

        h1 {
            color: #1976d2;
            margin-bottom: 20px;
        }

        .desc {
            color: #212121;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .controls {
            width: 100%;
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

        button {
            padding: 10px 20px;
            background: #039be5;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 0 5px;
        }

        #svg-container {
            position: relative;
            width: 100%;
            max-width: 600px;
            height: 400px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .text-label {
            position: absolute;
            color: #1a237e;
            font-weight: 500;
            opacity: 0;
            transition: opacity 0.5s;
        }

        .magnetic-field {
            stroke: #29b6f6;
            stroke-width: 2;
            fill: none;
            opacity: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>安培定律演示</h1>
        <div class="desc">
            安培定律描述电流产生磁场的规律：<br>
            <strong>dB = (μ₀/4π)·(I dl×r̂)/r²</strong><br>
            （dB为电流元Idl在空间某点产生的磁感应强度）
        </div>

        <div class="controls">
            <button id="startBtn">开始演示</button>
            <button id="pauseBtn">暂停</button>
        </div>

        <div id="svg-container">
            <svg id="ampereSvg" width="100%" height="100%" viewBox="0 0 600 400">
                <!-- 电流元导线 -->
                <line id="currentWire" x1="100" y1="200" x2="500" y2="200" stroke="#e53935" stroke-width="4" />

                <!-- 电流方向箭头 -->
                <polygon id="currentArrow" points="480,195 500,200 480,205" fill="#e53935" />

                <!-- 磁场分布圆环 -->
                <circle class="magnetic-field" cx="200" cy="200" r="40" />
                <circle class="magnetic-field" cx="200" cy="200" r="80" />
                <circle class="magnetic-field" cx="300" cy="200" r="40" />
                <circle class="magnetic-field" cx="300" cy="200" r="80" />
                <circle class="magnetic-field" cx="400" cy="200" r="40" />
                <circle class="magnetic-field" cx="400" cy="200" r="80" />
            </svg>

            <!-- 文字标注 -->
            <div class="text-label" id="label1">电流元 Idl</div>
            <div class="text-label" id="label2">磁场方向</div>
            <div class="text-label" id="label3">距离 r</div>
            <div class="text-label" id="label4" style="font-size: 1.2em;">dB ∝ I·dl/r²</div>
        </div>
    </div>

    <script>
        const svg = document.getElementById('ampereSvg');
        const startBtn = document.getElementById('startBtn');
        const pauseBtn = document.getElementById('pauseBtn');
        const labels = document.querySelectorAll('.text-label');
        const fields = document.querySelectorAll('.magnetic-field');
        let isPaused = false;
        let animationId;

        function showLabel(id, delay = 0) {
            setTimeout(() => {
                document.getElementById(id).style.opacity = 1;
            }, delay);
        }

        function hideLabel(id, delay = 0) {
            setTimeout(() => {
                document.getElementById(id).style.opacity = 0;
            }, delay);
        }

        async function runAnimation() {
            if (isPaused) return;

            // 初始化状态
            fields.forEach(field => field.style.opacity = 0);
            labels.forEach(label => label.style.opacity = 0);

            // 步骤1：显示电流导线
            showLabel('label1', 500);
            await new Promise(resolve => setTimeout(resolve, 1000));

            // 步骤2：动态显示磁场圆环
            for (let i = 0; i < fields.length; i++) {
                if (isPaused) break;
                fields[i].style.opacity = 1;
                fields[i].animate([
                    { strokeDasharray: '0 200' },
                    { strokeDasharray: '200 200' }
                ], { duration: 1500, fill: 'forwards' });
                await new Promise(resolve => setTimeout(resolve, 800));
            }

            // 步骤3：显示磁场方向标注
            showLabel('label2', 5000);
            showLabel('label3', 5500);

            // 步骤4：显示核心公式关系
            await new Promise(resolve => setTimeout(resolve, 2000));
            showLabel('label4', 7500);

            // 循环动画
            fields.forEach(field => {
                field.addEventListener('animationend', () => {
                    field.style.strokeDasharray = '200 200';
                    field.style.opacity = 0.5;
                });
            });
        }

        startBtn.addEventListener('click', () => {
            isPaused = false;
            animationId = requestAnimationFrame(runAnimation);
        });

        pauseBtn.addEventListener('click', () => {
            isPaused = true;
            cancelAnimationFrame(animationId);
        });
    </script>
</body>

</html>